/**
 * Tiem: 2023-1-10
 * FileName: Missions Detail(任务详情)
 * Editor: Haidong
 */

import React, { Component } from "react";
import { Space, Steps, Tabs, Typography, Tag } from "antd";
import { apiGetMissionsDetail } from "@/request/petTaxi";
import goBack from '@/assets/icons/goBack.png'
import chauffeurAvatar from '@/assets/images/chauffeur-avatar.png'
import userAvatar from '@/assets/images/zhanwei_head.svg'
import "../style/index.less";

const Step = Steps.Step
const Tab = Tabs.TabPane;
const { Title } = Typography;
class MissionsDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: props.match.params.id,
            current: 0,
            petArchives: {},
            petTaxiTask: {},
            addresses: [],
            customer: {},
            storeInfo: {},
            driverInfo: {},
            carInfo: {},
            orderInfo: {},
            progressList: [],
            storeInformation: false,
            status: "2,3,4,6",
            SuccessItems: [
                {
                    title: "待接单"
                },
                {
                    title: "待出发"
                },
                {
                    title: "接乘中"
                },
                {
                    title: "送达中"
                },
                {
                    title: "已完成"
                }
            ],
            userCancelItems: [
                {
                    title: "待接单",
                    status: 'process'
                },
                {
                    title: "已取消",
                    status: 'process'
                }
            ],
            driverCancelItems: [
                {
                    title: "待接单",
                    status: 'process'
                },
                {
                    title: "待出发",
                    status: 'process'
                },
                {
                    title: "已取消",
                    status: 'process'
                }
            ],
            items: []
        }
    }
    //Initialization
    componentDidMount() {
        this.getData()
    }
    //CTRL
    getData = async () => {
        // const id = this.props.match.params.id
        let id = this.state.id
        let res = await apiGetMissionsDetail(id)
        if (res.code === 0) {
            let progressList = res.data.progressList
            let taskStatus = res.data.petTaxiTask.taskStatus
            if(taskStatus === 5 || taskStatus === 6){
                if(progressList[progressList.length-2].taskStatus !==7 ) {
                    this.setState({
                        driverCancelItems:[
                            {
                                title: "待接单",
                                status: 'process'
                            },
                            {
                                title: "待出发",
                                status: 'process'
                            },
                            {
                                title: "接乘中",
                                status: 'process'
                            },
                            {
                                title: "已取消",
                                status: 'process'
                            }
                        ]
                    })
                }
            }
            switch (taskStatus) {
                case 1: 
                    this.setState({
                        items: this.state.SuccessItems,
                        current: taskStatus - 1
                    })
                    break;
                case 2: case 3: case 4:
                    this.setState({
                        items: this.state.SuccessItems,
                        current: taskStatus
                    })
                    break;
                case 7:
                    this.setState({
                        items: this.state.SuccessItems,
                        current: 2
                    })
                    break;
                case 5:
                    this.setState({
                        items: this.state.userCancelItems,
                        current: 1
                    })
                    break;
                case 6:
                    this.setState({
                        items: this.state.driverCancelItems,
                        current: 3
                    })
                    break;
                default:
                    break;
            }
            this.setState({
                petArchives: res.data.petArchives,
                petTaxiTask: res.data.petTaxiTask,
                addresses: res.data.addresses,
                customer: res.data.customer,
                storeInfo: res.data.storeInfo,
                driverInfo: res.data.driverInfo,
                carInfo: res.data.carInfo,
                progressList: res.data.progressList,
                orderInfo: res.data.orderInfo,
                customerPhone: (res.data.customer.phone).replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2"),
                driverPhone: res.data.driverInfo.phone ? (res.data.driverInfo.phone).replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") : "",
                itemPhone: (res.data.addresses[1].phone).replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2"),
            })
            if (res.data.storeInfo) {
                this.setState({
                    storeInformation: true
                })
            }
        }
    }
    //Tabs 切换
    tabsChange = (value) => {
        if (value === '3') {
            this.props.history.push(`/order/detail/${this.state.orderInfo.orderId}`);
        }
    }
    //View
    render() {
        const { orderInfo, current, items, petTaxiTask, petArchives, addresses, customer, storeInfo, driverInfo, carInfo, progressList, storeInformation, customerPhone, driverPhone, itemPhone } = this.state

        return (
            <div className="missionsDetailPage">
                <img preview={false} width={22} alt="" src={goBack} style={{ margin: "15px" }} onClick={() => this.props.history.goBack()}
                />
                <div className="steps">
                    <Steps current={current} >
                        {items.map((s, i) => <Step key={i} title={s.title} status={s.status} />)}
                    </Steps>
                    <div className="steps-button">
                        <Space size={'middle'}>
                            {/* <Button type="primary" ghost>派单</Button>
                            <Button danger>取消</Button> */}
                            {/* {dataSource.task.taskStatus} */}
                        </Space>
                    </div>
                </div>
                <div className="table">
                    任务概况
                    <table border="1" style={{ textAlign: "center" }} >
                        <tr>
                            <th>创建时间</th>
                            <td>
                                {petTaxiTask.createTime}
                            </td>
                            <th>任务ID</th>
                            <td>
                                {petTaxiTask.taskId}
                            </td>
                            <th>任务类型</th>
                            <td>
                                宠物打车
                            </td>
                        </tr>
                        <tr>
                            <th>任务单号</th>
                            <td>
                                {petTaxiTask.distributionCode}
                            </td>
                            <th>任务内容</th>
                            <td >
                                {petTaxiTask.taskContent}
                            </td>
                            <th>预约时间</th>
                            <td>
                                {petTaxiTask.appointmentTime}
                            </td>
                        </tr>
                        <tr>
                            <th>接单时间</th>
                            <td>
                                {petTaxiTask.beginTime}
                            </td>
                            <th>任务备注</th>
                            <td>
                                {petTaxiTask.remark}
                            </td>
                            <th></th>
                            <td></td>
                        </tr>
                    </table>
                </div>
                <div className="detail">
                    <Tabs defaultActiveKey={1} tabBarStyle={{ paddingLeft: '2.5%' }} onTabClick={(value) => this.tabsChange(value)}>
                        <Tab key={'1'} tab={'任务详情'}>
                            <div className="tab-body">
                                <div className="task-progress border-bottom">
                                    <Title level={5}>任务进度</Title>
                                    <div style={{ width: "100%" }}>
                                        <Steps direction="vertical"
                                            size="small"
                                            progressDot
                                            current={progressList.length}>
                                            {progressList.map((s, i) => <Step key={i} title={s.progressDescription}
                                                subTitle={s.progressName}
                                                description={s.address}
                                            />)}
                                        </Steps>
                                    </div>
                                </div>
                                <div className="task-progress border-bottom">
                                    <Title level={5}>地址信息</Title>
                                    <ul>
                                        {addresses.map(item => {
                                            return <li style={{ marginBottom: '20px' }}>
                                                <div style={{ width: "100%" }}>
                                                    <div style={{ width: "500px" }}>
                                                        {item.name??''}
                                                        &nbsp;&nbsp;&nbsp;
                                                        { item.typeName === "客户" && item.name  ? null : <Tag >{item.typeName}</Tag> }
                                                        
                                                    </div>
                                                </div>
                                                <div>{item.typeName === "客户" ? itemPhone ?? item.phone : item.phone} {item.typeName === "客户" ? <Tag onClick={() => { this.setState({ itemPhone: null }) }} > 联系客户</Tag> : null} </div>
                                                <div style={{ width: "100%" }}>{item.address}</div>
                                            </li>
                                        })}
                                    </ul>
                                </div>
                                <div className="task-progress border-bottom">
                                    <Title level={5}>客户信息</Title>
                                    <ul>
                                        <li>
                                            <Space>
                                                <div className="label">客户头像：</div>
                                                <img className="img" alt="" src={customer.avatar ?? userAvatar} />
                                            </Space>
                                        </li>
                                        {/* <li>
                                            <Space>
                                                <div className="label">客户ID：</div>
                                                <div>{customer.memberId}</div>
                                            </Space>
                                        </li> */}
                                        <li>
                                            <Space>
                                                <div className="label">客户昵称：</div>
                                                <div>{customer.nickname}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">手机号：</div>
                                                <div>{customerPhone ?? customer.phone}</div>
                                                <Tag onClick={() => { this.setState({ customerPhone: null }) }} >联系客户</Tag>
                                            </Space>
                                        </li>
                                    </ul>
                                </div>
                                {storeInformation &&
                                    <div className="task-progress border-bottom">
                                        <Title level={5}>店铺信息</Title>
                                        <ul>
                                            {/* <li>
                                                <Space>
                                                    <div className="label">商家名称：</div>
                                                    <div>{storeInfo.storeName}</div>
                                                </Space>
                                            </li>
                                            <li>
                                                <Space>
                                                    <div className="label">商家ID：</div>
                                                    <div>{storeInfo.storeId}</div>
                                                </Space>
                                            </li>
                                            <li>
                                                <Space>
                                                    <div className="label">手机号：</div>
                                                    <div>{storeInfo}</div>
                                                </Space>
                                            </li> */}
                                            <li>
                                                <Space>
                                                    <div className="label">店铺头像：</div>
                                                    <img className="img" alt="" src={storeInfo.storeAvatar} />
                                                </Space>
                                            </li>
                                            <li>
                                                <Space>
                                                    <div className="label">店铺ID：</div>
                                                    <div>{storeInfo.storeId}</div>
                                                </Space>
                                            </li>
                                            <li>
                                                <Space>
                                                    <div className="label">店铺名称：</div>
                                                    <div>{storeInfo.storeName}</div>
                                                </Space>
                                            </li>
                                            <li>
                                                <Space>
                                                    <div className="label">店铺地址：</div>
                                                    <div>{storeInfo.addressDetail}</div>
                                                </Space>
                                            </li>
                                            <li>
                                                <Space>
                                                    <div className="label">联系方式：</div>
                                                    <div>{storeInfo.storeContact}</div>
                                                </Space>
                                            </li>
                                        </ul>
                                    </div>
                                }
                                {driverInfo.driverId &&
                                    <>
                                        <div className="task-progress border-bottom">
                                            <Title level={5}>司机信息</Title>
                                            <ul>
                                                <li>
                                                    <Space>
                                                        <div className="label">司机头像：</div>
                                                        <img className="img" alt="" src={driverInfo.avatar !== "" ? driverInfo.avatar : chauffeurAvatar} />
                                                    </Space>
                                                </li>
                                                <li>
                                                    <Space>
                                                        <div className="label">司机UID：</div>
                                                        <div>{driverInfo.driverId}</div>
                                                    </Space>
                                                </li>
                                                <li>
                                                    <Space>
                                                        <div className="label">司机昵称：</div>
                                                        <div>{driverInfo.nickname}</div>
                                                    </Space>
                                                </li>
                                                <li>
                                                    <Space>
                                                        <div className="label">司机联系方式：</div>
                                                        <div>{driverPhone ?? driverInfo.phone}</div>
                                                        <Tag onClick={() => { this.setState({ driverPhone: null }) }} >联系司机</Tag>
                                                    </Space>
                                                </li>
                                            </ul>
                                        </div>
                                        <div className="task-progress border-bottom pet">
                                            <Title level={5}>车辆信息</Title>
                                            <ul>
                                                <li>
                                                    <Space>
                                                        <div className="label">车辆图片：</div>
                                                        <img className="img" alt="" src={carInfo.picture ?? chauffeurAvatar} />
                                                    </Space>
                                                </li>
                                                <li>
                                                    <Space>
                                                        <div className="label">车辆品牌：</div>
                                                        <div>{carInfo.brand}</div>
                                                    </Space>
                                                </li>
                                                <li>
                                                    <Space>
                                                        <div className="label">车辆型号：</div>
                                                        <div>{carInfo.model}</div>
                                                    </Space>
                                                </li>
                                                <li>
                                                    <Space>
                                                        <div className="label">车身颜色：</div>
                                                        <div>{carInfo.color}</div>
                                                    </Space>
                                                </li>
                                                <li>
                                                    <Space>
                                                        <div className="label">车牌号：</div>
                                                        <div>{carInfo.number}</div>
                                                    </Space>
                                                </li>
                                            </ul>
                                        </div>
                                    </>
                                }
                            </div>
                        </Tab>
                        <Tab key={'2'} tab={'宠物信息'}>
                            <div className="tab-body">
                                <div className="border-bottom pet">
                                    <Title level={5}>宠物信息</Title>
                                    <ul>
                                        <li>
                                            <Space>
                                                <div className="label">宠物头像：</div>
                                                <img className="img" alt="" src={petArchives.petCardShowImages} />
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">宠物ID：</div>
                                                <div>{petArchives.petArchivesId}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">昵称：</div>
                                                <div>{petArchives.petName}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">品种：</div>
                                                <div>{petArchives.petVarieties}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">生日：</div>
                                                <div>{petArchives.birthday}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">身份ID：</div>
                                                <div>{petArchives.petIdCard}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">体重：</div>
                                                <div>{petArchives.petWeight}KG</div>
                                            </Space>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </Tab>
                        {orderInfo && <Tab key={'3'} tab={'打车订单'}></Tab>}
                    </Tabs>
                </div>
            </div>
        )
    }
}

export default MissionsDetail